<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/songerSingle.css">
    <script src="../Vuejs文件/vue.js"></script>
    <script src="../axios-master/dist/axios.min.js"></script>
</head>

<body>
    <div class="g-all">
        <div class="g-mn4">
            <div class="g-artist">
                <div class="g-artistname">
                    <h2>
                        {{artist.name}}
                    </h2>
                </div>
                <div class="g-cover">
                    <img class="artister" v-bind:src="artist.picUrl" alt="">
                </div>
            </div>
            <div class="liebiao">
                <ul>
                    <li class="lia"><a href="songerSingle.html">热门作品</a></li>
                    <li class="lib"><a href="songerAlbum.html">所有专辑</a></li>
                    <li class="lic"><a href="songerInformation.html">艺人介绍</a></li>
                </ul>
            </div>
        </div>
        <div class="g-mn5">
            <table class="g-table">
                <tr class="clj">
                    <td>
                        <span>序号</span>
                    </td>
                    <td>
                        <span>歌曲名</span>
                    <td>
                        <span>时长</span>
                    </td>
                    <td>
                        <span>专辑</span>
                    </td>
                </tr>
                <tr v-for="(item,index) in songs" class="clj2">
                    <td class="td0">
                        {{index+1}}
                    </td>
                    <td width="300px" class="td1">
                        <a v-bind:title=item.name href="jutigequ.html" @click="goToSongs(item.id)">
                            {{item.name}}
                        </a>
                        <span v-for="item1 in item.alia">
                            -({{item1}})
                        </span>
                    </td>
                    <td>
                        {{item.dt}}
                    </td>
                    <td>
                        <a href="zhuanji.html" v-bind:title=item.al.name @click="goToAlbum(item.al.id)">
                            {{item.al.name}}
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </div>
    <script>
        var app = new Vue({
            el: ".g-all",
            data: {
                songerId: "",
                songerImg: "",
                songerName: "",
                artist: {
                    id: "",
                    name: "",
                    picUrl: "",
                },
                songs: [{
                    name: "",       //歌曲名
                    id: "",     //歌曲id
                    dt: "",     //歌曲时长
                    al: {       //专辑
                        id: "",
                        name: "",
                        picUrl: "",
                    },
                    alia: [],        //灰色字体备注
                }],
            },
            methods: {
                get: function () {
                    var that = this;
                    that.artist.id = sessionStorage.getItem("songerId");
                    axios.get(
                        "https://autumnfish.cn/artist/album?id=" + that.artist.id
                    ).then(function (response) {
                        that.artist = response.data.artist;
                        that.artist.picUrl = that.artist.picUrl + "?param=370y300";
                    }, function (err) {

                    })
                    axios.get(
                        "https://autumnfish.cn/artist/top/song?id=" + that.artist.id
                    ).then(function (response) {
                        console.log(response);
                        that.songs = response.data.songs;
                        that.changeSongTime();
                    }, function (err) {

                    })
                },
                changeSongTime: function () {
                    var t;
                    var s1;
                    var s2;
                    for (var i = 0; i < this.songs.length; i++) {
                        t = parseInt(this.songs[i].dt / 1000);
                        if (t / 60 < 10) {
                            s1 = "0";
                        } else {
                            s1 = "";
                        }
                        if (t % 60 < 10) {
                            s2 = "0";
                        } else {
                            s2 = ""
                        }
                        this.songs[i].dt = s1 + parseInt(t / 60) + ":" + s2 + t % 60;
                    }
                },
                goToSongs: function (songId) {      //给具体歌曲页面传参数
                    var s = new Array();
                    sessionStorage.setItem("songId", songId); //当前点击歌的id
                    for (var i = 0; i < this.songs.length; i++) {
                        s[i] = this.songs[i].id;
                    }
                    sessionStorage.setItem("gequIdList", JSON.stringify(s));
                },
                goToAlbum: function (albumId) {
                    sessionStorage.setItem("albumId", albumId);
                }
            },
        });
        //初始化页面
        app.get();
    </script>
</body>

</html>